<template>
	<view :class="wrapClass">
		<button class="cu-btn" :disabled="renderDisabled" :style="{ backgroundColor: customColor }" :class="buttonClass.concat(cls)" @click="$emit('click', setLoding)">
			<text class="cuIcon-loading2 cuIconfont-spin" v-if="loading"></text>
			<text v-if="icon && !loading" :class="`cuIcon-${icon}`"></text>
			<slot v-if="!loading"></slot>
			<text v-else>{{loadingDisabledText}}</text>
		</button>
	</view>
</template>

<script>
	import ClassSimple from '../../mixins/classSimple'
	export default {
		mixins: [ClassSimple],
		props: {
			// 图标名称
			icon: {
				type: String,
				default() {
					return ''
				}
			},
			// 是否有阴影
			shadow: {
				type: Boolean,
				default () {
					return false
				}
			},
			cls: {
				type: Array,
				default () {
					return []
				}
			},
			// 按钮块
			block: {
				type: Boolean,
				default () {
					return true
				}
			},
			// 圆角
			radius: {
				type: Boolean,
				default () {
					return false
				}
			},
			// 圆形按钮
			round: {
				type: Boolean,
				default () {
					return false
				}
			},
			// 是否镂空按钮
			isLine: {
				type: Boolean,
				default () {
					return false
				}
			},
			// 默认主题背景
			theme: {
				type: Boolean,
				default () {
					return true
				}
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default () {
					return false
				}
			},
			loadingDisabledText: {
				type: String,
				default() {
					return '请稍后...'
				}
			},
			// 自定义颜色 [主颜色, 禁用颜色]
			customColor: {
				type: String,
				default () {
					return ''
				}
			},
			// 按钮尺寸
			size: {
				type: String,
				default() {
					return 'lg'
				}
			}
		},
		data() {
			return {
				buttonClass: [],
				wrapClass: [],
				loading: false,
				renderDisabled: false
				
			}
		},
		created() {
			this.renderDisabled = this.disabled
			this.wrapClass = this.className
			// 取出padding值
			if (this.theme) {
				this.buttonClass.push('bg-theme')
			}
			if (this.block) {
				this.wrapClass.push('flex flex-direction')
			}
			if (this.shadow) {
				this.buttonClass.push('shadow')
			}
			if (this.radius && !this.round) {
				this.buttonClass.push('radius')
			}
			if (this.round) {
				this.buttonClass.push('round')
			}
			if (this.isLine) {
				this.buttonClass.push('line-theme')
			}
			
			if (this.size && ['sm', 'lg', 'xl'].indexOf(this.size) !== -1) {
				this.buttonClass.push(this.size)
			}
		},
		methods: {
			setLoding(loading) {
				this.loading = loading
				this.renderDisabled = loading
			}
		}
	}
</script>

<style lang="scss" scoped>
	.line-theme {
		color: $uni-color-primary;
	}

	.bg-theme {
		background-color: $uni-color-primary;
		color: #fff;
		&[disabled] {
			background-color: $uni-color-primary;
			color: #fff;
			opacity: $uni-opacity-disabled;
		}
	}
</style>
